<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript">
var alreadySetSkuVals = {};//已经设置的SKU值数据
$(function(){
	$("#sale").validate({
		submitHandler:function(form){
			$(form).ajaxSubmit({
				success:function(data){
					switch(data.flag){
					case 2:
						Kit.alert("请选择规格参数");return;
					/* case -1:
						Kit.alert("网络繁忙...，请重试");return;  */
					case 0:
						dataPaginator.loadPage(1);
						saleDialog.close();
						return;
						
					}
				}
			});
		}
	})
	//sku属性发生改变时,进行表格创建
	$(document).on("change",'.optionName',function(){
		getAlreadySetSkuVals();//获取已经设置的SKU值
		console.log(alreadySetSkuVals);
		var b = true;
		var skuTypeArr =  [];//存放SKU类型的数组
		var totalRow = 1;//总行数
		//获取元素类型
		$(".SKU_TYPE").each(function(){
			//SKU类型节点
			var skuTypeNode = $(this).children("li");
			var skuTypeObj = {};//sku类型对象
			//SKU属性类型标题
			skuTypeObj.skuTypeTitle = $(skuTypeNode).attr("sku-type-name");
			//SKU属性类型主键
			var propid = $(skuTypeNode).attr("propid");
			skuTypeObj.skuTypeKey = propid;
			//是否是必选SKU 0：不是；1：是；
			var is_required = $(skuTypeNode).attr("is_required");
			skuValueArr = [];//存放SKU值得数组
			//SKU相对应的节点
			var skuValNode = $(this).next();
			//获取SKU值
			var skuValCheckBoxs = $(skuValNode).find("input[type='checkbox'][class*='optionName']");
			var checkedNodeLen = 0 ;//选中的SKU节点的个数
			$(skuValCheckBoxs).each(function(){
				if($(this).is(":checked")){
					var skuValObj = {};//SKU值对象
					skuValObj.skuValueTitle = $(this).val();//SKU值名称
					skuValObj.skuValueId = $(this).attr("propvalid");//SKU值主键
					skuValObj.skuPropId = $(this).attr("propid");//SKU类型主键
					skuValueArr.push(skuValObj);
					checkedNodeLen ++ ;
				}
			});
			if(is_required && "1" == is_required){//必选sku
				if(checkedNodeLen <= 0){//有必选的SKU仍然没有选中
					b = false;
					return false;//直接返回
				}
			}
			if(skuValueArr && skuValueArr.length > 0){
				totalRow = totalRow * skuValueArr.length;
				skuTypeObj.skuValues = skuValueArr;//sku值数组
				skuTypeObj.skuValueLen = skuValueArr.length;//sku值长度
				skuTypeArr.push(skuTypeObj);//保存进数组中
			}
		});
		var SKUTableDom = "";//sku表格数据
		//开始创建行
		if(b){//必选的SKU属性已经都选中了
			
//			//调整顺序(少的在前面,多的在后面)
//			skuTypeArr.sort(function(skuType1,skuType2){
//				return (skuType1.skuValueLen - skuType2.skuValueLen)
//			});
//			
			SKUTableDom += "<table class='skuTable'><tr>";
			//创建表头
			for(var t = 0 ; t < skuTypeArr.length ; t ++){
				SKUTableDom += '<th>'+skuTypeArr[t].skuTypeTitle+'</th>';
			}
			
			SKUTableDom += '<th>价格</th><th>库存</th><th>内部编码</th><th>国际编码</th>';
			SKUTableDom += "</tr>";
			//循环处理表体
			for(var i = 0 ; i < totalRow ; i ++){//总共需要创建多少行
				var currRowDoms = "";
				var rowCount = 1;//记录行数
				var propvalidArr = [];//记录SKU值主键
				var propIdArr = [];//属性类型主键
				var propvalnameArr = [];//记录SKU值标题
				var propNameArr = [];//属性类型标题
				for(var j = 0 ; j < skuTypeArr.length ; j ++){//sku列
					var skuValues = skuTypeArr[j].skuValues;//SKU值数组
					var skuValueLen = skuValues.length;//sku值长度
					rowCount = (rowCount * skuValueLen);//目前的生成的总行数
					var anInterBankNum = (totalRow / rowCount);//跨行数
					var point = ((i / anInterBankNum) % skuValueLen);
					propNameArr.push(skuTypeArr[j].skuTypeTitle);
					if(0  == (i % anInterBankNum)){//需要创建td
						currRowDoms += '<td rowspan='+anInterBankNum+'>'+skuValues[point].skuValueTitle+'</td>';
						propvalidArr.push(skuValues[point].skuValueId);
						propIdArr.push(skuValues[point].skuPropId);
						propvalnameArr.push(skuValues[point].skuValueTitle);
					}else{
						//当前单元格为跨行
						propvalidArr.push(skuValues[parseInt(point)].skuValueId);
						propIdArr.push(skuValues[parseInt(point)].skuPropId);
						propvalnameArr.push(skuValues[parseInt(point)].skuValueTitle);
					}
				}
//				
//				//进行排序(主键小的在前,大的在后),注意:适用于数值类型的主键
//				propvalidArr.sort(function(provids1,propvids2){
//					return (provids1 - propvids2)
//				});
				
				var propvalids = propvalidArr.toString()
				var alreadySetSkuPrice = "";//已经设置的SKU价格
				var alreadySetSkuStock = "";//已经设置的SKU库存
				var alreadySetSkuCoding = "";//已经设置的SKU价格
				var alreadySetSkuBarcode = "";//已经设置的SKU价格
				//赋值
				if(alreadySetSkuVals){
					var currGroupSkuVal = alreadySetSkuVals[propvalids];//当前这组SKU值
					if(currGroupSkuVal){
						alreadySetSkuPrice = currGroupSkuVal.skuPrice;
						alreadySetSkuStock = currGroupSkuVal.skuStock;
						alreadySetSkuCoding = currGroupSkuVal.skuCoding;
						alreadySetSkuBarcode = currGroupSkuVal.skuBarcode
					}
					console.log(propvalnameArr);
					console.log();
				}
				SKUTableDom += '<tr propvalids=\''+propvalids+
								'\' propids=\''+propIdArr.toString()+
								'\' propvalnames=\''+propvalnameArr.join(";")+
								'\'propnames=\''+propNameArr.join(";")+
								'\' class="sku_table_tr">'+currRowDoms+
						'<td><input type="text" class="setting_sku_price" id=\"KskuPrice\" name=\"KskuPrice\" value="'+alreadySetSkuPrice+
				'"/></td><input type="text" class="setting_sku_stock" id=\"KpropvalnameArr\" name=\"KpropvalnameArr\" hidden=\"hidden\" value="'+propvalnameArr+
				'"/><td><input type="text" class="setting_sku_stock" id=\"KskuStock\" name=\"KskuStock\" value="'+alreadySetSkuStock+
				'"/></td><td><input type="text" class="setting_sku_coding" id=\"KskuCoding\" name=\"KskuCoding\" value="'+alreadySetSkuCoding+
				'"/></td><td><input type="text" class="setting_sku_barcode" id=\"KskuBarcode\" name=\"KskuBarcode\" value="'+alreadySetSkuBarcode+
				'"/></td></tr>';
				
			}
			SKUTableDom += "</table>";
		}
		
		$("#skuTable").html(SKUTableDom);
	});
});

var customPropId = -1;//自定义属性类型ID
var customPropValId = -1;//自定义属性值id
$(function(){
	//克隆SKU模板生成自定义sku
	$("#cloneSku").unbind("click");
	$(document).on("click" , ".cloneSku" , function(){
		var cloneSource = $("#skuCloneModel");//要克隆的sku模板
		var cloneNode = cloneSource.clone(true);//克隆出来的节点
		cloneNode.css("display","block");//显示元素
		//移除id
		cloneNode.removeAttr("id");
		customPropId -- ;
		//设置自定义属性类型主键
		$(cloneNode).find(".cusSkuTypeInput").parent().attr("propid",customPropId);
		//设置SKU类型主键 propid
		$(cloneNode).find(".cusSkuValInput").prev().attr("propid",customPropId);
		customPropValId -- ;
		//设置自定义属性类型值主键
		$(cloneNode).find(".cusSkuValInput").prev().attr("propvalid",customPropValId);
		$(this).before(cloneNode);//添加到该按钮的前面
	});
	
	//添加自定义sku值
	$("#cloneSkuVal").unbind("click");
	$(document).on("click",".cloneSkuVal",function(){
		//要克隆的SKU值模板
		var cloneSource = $("#onlySkuValCloneModel");
		//克隆出来的节点
		var cloneNode = cloneSource.clone(true);
		//移除id
		cloneNode.removeAttr("id");
		//获取并设置SKU类型主键
		var propid = $(this).parents("ul").prev().find("li").attr("propid");
		$(cloneNode).find(".cusSkuValInput").prev().attr("propid",propid);
		customPropValId -- ;
		//设置自定义属性类型值主键
		$(cloneNode).find(".cusSkuValInput").prev().attr("propvalid",customPropValId);
		//显示元素
		cloneNode.css("display","block");
		//添加到该按钮的前面
		$(this).before(cloneNode);
	});
	
	//SKU类型改变
	$(document).on("change", ".cusSkuTypeInput", function(){
		//判断当前的SKU类型是否已经存在
		var isHaveThisSkuType = false;
		var customSkuTypeName = $(this).val();
		if(customSkuTypeName){
			$("ul[class*='SKU_TYPE']").find("li").each(function(){
				var currSkuTypeName = $(this).attr("sku-type-name");//当前SKU类型名称
				if(currSkuTypeName == customSkuTypeName){//该SKU类型已经存在
					isHaveThisSkuType = true;
				}
			});
		}
		if(isHaveThisSkuType){
			layer.alert("该SKU类型已经存在!");
			$(this).val("");
		}
		//赋值类型属性
		$(this).parent().attr("sku-type-name",$(this).val());
		if(!$(this).val() || isHaveThisSkuType){
			$(this).parent().parent().next().find("input[type='checkbox'][class*='optionName']").each(function(){
				//取消选中
				$(this).attr("checked",false)
				//移除class
				$(this).removeClass("optionName");
			});
		}
		//触发change事件,重绘表格
		$(".model_sku_val").trigger("change");
	});
	
	//SKU值改变
	$(document).on("change", ".cusSkuValInput", function(){
		var isHaveSkuVal = false;//是否已经存在当前的SKU值
		var thisSkuVal = $(this).val();
		//判断SKU值是否已经重复了
		$(".model_sku_val,.optionName").each(function(){
			var customSkuVal = $(this).val();//当前SKU值
			if(thisSkuVal == customSkuVal){
				isHaveSkuVal = true;
				return;
			}
		});
		
		if(isHaveSkuVal){
			layer.alert("该SKU类型已经存在!");
			$(this).val("");
		}
		$("input[type*='checkbox'][class*='']")
		var cusSkuVal = $(this).val();
		if(!cusSkuVal || isHaveSkuVal){
			//移除class
			$(this).prev().removeClass("optionName");
			if($(this).prev().is(":checked")){
				//移除选中
				$(this).prev().attr("checked",false);
			}
		}
		//赋值类型属性
		$(this).prev().val(cusSkuVal);
		//触发change事件
		$(".model_sku_val").trigger("change");
	});
	
	//未设置sku值和属性的sku选择框改变事件
	$(document).on("change",".model_sku_val",function(){
		//SKU类型
		var skuTypeVal = $(this).parent().parent().prev().find("li").attr("sku-type-name");
		//是否设置了sku类型及sku值
		if(skuTypeVal && $(this).val()){
			//添加class
			$(this).addClass("optionName");
		}
		//触发change事件,重绘表格
		$("input[type='checkbox']").first().trigger("change");
	});
	
	//删除自定义sku类型模块
	$(document).on("click",".delCusSkuType",function(){
		$(this).parent().parent().parent().remove();
		//触发change事件,重绘表格
		$("input[type='checkbox']").first().trigger("change");
	});
	
	//删除自定义sku值
	$(document).on("click",".delCusSkuVal",function(){
		$(this).parent().remove();
		//触发change事件,重绘表格
		$("input[type='checkbox']").first().trigger("change");
	});
})
/**
 * 获取已经设置的SKU值 
 */
function getAlreadySetSkuVals(){
	alreadySetSkuVals = {};
	//获取设置的SKU属性值
	$("tr[class*='sku_table_tr']").each(function(){
		var skuPrice = $(this).find("input[type='text'][class*='setting_sku_price']").val();//SKU价格
		var skuStock = $(this).find("input[type='text'][class*='setting_sku_stock']").val();//SKU库存
		var skuCoding = $(this).find("input[type='text'][class*='setting_sku_coding']").val();//SKU商家编码
		var skuBarcode = $(this).find("input[type='text'][class*='setting_sku_barcode']").val();//SKU国际编码
		if(skuPrice || skuStock || skuCoding || skuBarcode){//已经设置了全部或部分值
			var propvalids = $(this).attr("propvalids");//SKU值主键集合
			alreadySetSkuVals[propvalids] = {
				"skuPrice" : skuPrice,
				"skuStock" : skuStock,
				"skuCoding" : skuCoding,
				"skuBarcode" : skuBarcode
			}
		}
	});
}
//获取已经设置的SKU
$(".getSetSkuVal").on("click",function(){
	$("tr[class*='sku_table_tr']").each(function(){
		var propids = $(this).attr("propids");//SKU类型主键
		var propvalids = $(this).attr("propvalids");//SKU值主键
	});
});

</script> 
<form id="sale" action="${BASE_PATH}/bus/goods/base/addSku" method="post" class="form-horizontal" style="">
	<!-- 获得数据，使用双层嵌套循环 -->
	<c:forEach items="${list}" var="spec" varStatus="s">
		<ul class="SKU_TYPE">
			<li is_required='1' propid='${(o.index+1)}' sku-type-name="${spec.specName}"><em>*</em>${spec.specName}:</li>
		</ul>
		<ul>
			<c:forEach items="${spec.optionName}" var="optionName" varStatus="o">
				<li><label><input type="checkbox" class="optionName" propvalid='${(s.index+1)*10+(o.index+1)}' value="${optionName}" />${optionName}</label></li>
			</c:forEach>
		</ul>
		<div class="clear"></div>
	</c:forEach>
	<!-- 隐藏域，传值使用 -->
	<input type="text" id="goodsid" name="goodsid" hidden="hidden" value="${goodsid}"/>
	<!-- 添加规格参数 -->
	<button type="button" class="cloneSku btn btn-default">添加规格参数</button>
	<!--sku模板,用于克隆,生成自定义sku-->
	<div id="skuCloneModel" style="display: none;">
		<div class="clear"></div>
		<ul class="SKU_TYPE">
			<li is_required='0' propid='' sku-type-name="">
				<a href="javascript:void(0);" class="delCusSkuType">移除</a>
				<input type="text" class="cusSkuTypeInput" />：
			</li>
		</ul>
		<ul>
			<li>
				<input type="checkbox" class="model_sku_val" propvalid='' value="" />
				<input type="text" class="cusSkuValInput" />
			</li>
			<button type="button" class="cloneSkuVal btn btn-default">添加自定义属性值</button>
		</ul>
		<div class="clear"></div>
	</div>
	<!--单个sku值克隆模板-->
	<li style="display: none;" id="onlySkuValCloneModel">
		<input type="checkbox" class="model_sku_val" propvalid='' value="" />
		<input type="text" class="cusSkuValInput" />
		<a href="javascript:void(0);" class="delCusSkuVal">删除</a>
	</li>
	<div class="clear"></div>
	<div id="skuTable"></div>
	<div class="row">
		<div class="col-lg-6"><button class="btn btn-primary col-sm-3 pull-right" type="submit" autocomplete="off" >提交</button></div>
		<div class="col-lg-6"><button class="btn btn-default col-sm-3 pull-left"  type="button" onclick="javascript:saleDialog.close();window.location.reload();" autocomplete="off">取消</button></div>
	</div>
</form>